<template>
  <div class="index">
    <div class="tab">
      <div class="tab1" @click="tabs(1)">
        <div :class="active == 1 ? 'wz' : 'wz1'">非遗企业</div>
        <div :class="active == 1 ? 'xian' : 'xian1'"></div>
      </div>
      <div class="tab1" style="padding-left: 1.5625rem" @click="tabs(2)">
        <div :class="active == 2 ? 'wz' : 'wz1'">非遗商品</div>
        <div :class="active == 2 ? 'xian' : 'xian1'"></div>
      </div>
    </div>
    <div class="cont" v-if="active == 1">
      <vue-loadmore :on-loadmore="onLoad" :finished="finished">
        <div
          class="cont1"
          v-for="(item, index) in shhuList"
          :key="item.fyclassdataid"
          @click="toshxq(item.fyclassdataid)"
        >
          <img
            :src="item.picurl"
            alt=""
          />
          <div class="ri">
            <div class="ri1">
              <div class="r11">{{item.shmc}}</div>
              <div class="r12">
                <span class="c_1">{{ item.codename }}</span>
                <van-tag
                  style="margin-left: 0.625rem"
                  text-color="#D19C4F"
                  color=" #FFD19C4F"
                  >{{item.areaname}}</van-tag
                >
              </div>
            </div>
            <div class="ri2">
              {{filtertt(item.shjj)}}
            </div>
          </div>
        </div>
      </vue-loadmore>
    </div>
    <div class="cont" v-if="active == 2">
      <vue-loadmore :on-loadmore="onLoad1" :finished="finished1">
        <div
          class="cont1"
          v-for="(item, index) in shhuList"
          :key="item.fyclassdataid"
          
        >
          <img
            @click="tospxq(item.fyclassdataid)"
            :src="item.picurl"
            alt=""
          />
          <div class="ri">
            <div class="ri1"  @click="tospxq(item.fyclassdataid)">
              <div class="r11">{{item.spmc}}</div>
            </div>
            <div class="r13"><span>￥</span>{{item.spJiage}}</div>
            <div class="r14" @click="toshxq(item.fyclassdataparentid)">去店铺</div>
          </div>
        </div>
      </vue-loadmore>
    </div>
  </div>
</template>

<script>
import { getwdsc, postSaveVisit } from "@/api/api.js";
export default {
  name: "",
  data() {
    return {
      active: 1,
      finished: false,
      finished1: false,
      listLength: 200,
      lx:1,
      yhlist:{},
      shhuList:[],
      listLength:0,
      pageIndex: 1,
      pageSize: 10,
      user: JSON.parse(localStorage.getItem('userlogin')),

    };
  },
  created() {
    this.yhlist = JSON.parse(localStorage.getItem('userlogin'))
    this.getsc()
    this.postSaveVisit()
  },
  mounted() {},
  methods: {
    async postSaveVisit(){  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 7
      })
    },
    tospxq(id){
      this.$router.push({ path: "/goodsXq", query: { id: id } });
    },
    toshxq(id){
      this.$router.push({ path: "/merchantXq", query: { id: id } });
    },
    filtertt(text) {
      var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
      text = text.replace(reg, ""); //替换HTML标签
      text = text.replace(/&emsp;/gi, ""); //替换HTML空格
      text = text.replace(/&nbsp;/gi, "");
      return text;
    },
    async getsc(){
      let res =  await getwdsc({
        lx:this.lx,
        yhid:this.yhlist.id || this.user.yhid,
        pageIndex:this.pageIndex,
        pageSize:this.pageSize

      })
      if(res.code == 200){
        this.listLength = res.data.list.length;
        this.shhuList = [...this.shhuList, ...res.data.list];
      }
    },
    onLoad(done) {
      console.log(11111);
      this.pageIndex++;
      if (this.listLength >= 10) {
        this.getsc()
      } else {
        this.finished = true;
      }

      done();
    },
    onLoad1(done) {
      console.log(11111);
      this.pageIndex++;
      if (this.listLength >= 10) {
        this.getsc()
      } else {
        this.finished = true;
      }

      done();
    },
    tabs(id) {
      this.active = id;
      this.lx = id
      this.listLength = 0
      this.pageIndex = 1
      this.finished=false
      this.shhuList =[]
      this.getsc()
    },
  },
};
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/bj.png") no-repeat;
  background-size: 100% 100%;
  .tab {
    width: calc(100% - 3rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    padding-top: 3rem;

    .tab1 {
      .wz {
        // width: 4rem;
        height: 1.375rem;
        font-size: 1rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 550;
        color: #333333;
      }
      .wz1 {
        // width: 4rem;
        height: 1.375rem;
        font-size: 1rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      .xian {
        width: 2.1875rem;
        height: 0.375rem;
        background: #6caafe;
        border-radius: 0.25rem;
        margin: -0.4063rem auto 0;
      }
      .xian1 {
        width: 2.1875rem;
        height: 0.375rem;
        border-radius: 0.25rem;
        margin: -0.4063rem auto 0;
      }
    }
  }

  .cont {
    height: 18.75rem;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      #f7faff 100%
    );
    position: relative;
    top: 2.875rem;
    border-radius: 1.25rem 1.25rem 0px 0px;
    height: 18.75rem;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 1) 0%,
      #f7faff 100%
    );
    position: relative;
    top: 2.875rem;
    border-radius: 1.25rem 1.25rem 0px 0px;
    width: calc(100% - 1.75rem);
    padding: 1.9375rem 0.875rem 0;

    .cont1 {
      display: flex;
      width: calc(100% - 1.5rem);
      padding: 0.75rem;
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;
      img {
        width: 7.5rem;
        height: 5.625rem;
        border-radius: 0.5rem;
      }
      .ri {
        width: calc(100% - 8.5625rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 1.0625rem;
        .ri1 {
          width: 100%;
          .r11 {
            width: 100%;
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 1.375rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }
          .r12 {
            width: 100%;
            display: flex;
            padding-top: 0.375rem;
            .c_1 {
                color: #6CAAFE;
                background: rgba(108, 170, 254, 0.2);
                // margin-right: .5625rem;
                font-size: .75rem;
                padding: 0 .2rem;
                border-radius: .125rem;
                }
          }
          
        }
        .r13 {
            width: 100%;
            font-size: 1.25rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f15712;
            span {
              font-size: 0.875rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #f15712;
            }
          }
        .r14{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 3.5625rem;
            height: 1.125rem;
            border-radius: .625rem;
            border: .0625rem solid #999999;
            font-size: .75rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: calc(100% - 4rem);
        }
        .ri2 {
          width: 100%;
          font-size: 0.625rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 0.9375rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>